@import 'mixins';
@import 'vars';

.notification-container {
    @include force-width(30rem);
    @include fixed;
    margin: .625rem;
    z-index: 100000;

    .alert {
        max-height: 20rem;

        &::ng-deep {
            p {
                &:last-child {
                    margin-bottom: 0;
                }
            }
        }
    }

    &-top-right {
        @include fixed(0, 0, auto, auto);
    }

    &-top-left {
        @include fixed(0, auto, auto, 0);
    }

    &-bottom-right {
        @include fixed(auto, 0, 0, auto);
    }

    &-bottom-left {
        @include fixed(auto, auto, 0, 0);
    }

    .shadow,
    .shadowed {
        position: relative;
    }

    .shadowed {
        z-index: 2;
    }

    .shadow {
        @include absolute(0, auto, 0, 0);
        animation: width 10s 1 linear;
        background: $color-black;
        border: 0;
        opacity: .1;
        overflow: hidden;
        width: 100%;
        z-index: 1;
    }
}

@keyframes width {
    100% {
        width: 0;
    }
}

$caret-size: 6px;

.tooltip2 {
    background: $color-tooltip;
    border: 0;
    border-radius: 0;
    color: $color-white;
    font-size: $font-small;
    font-weight: normal;
    padding: .5rem;
    white-space: nowrap;

    &-left {
        &::after {
            @include caret-right($color-tooltip, $caret-size);
            @include absolute(50%, -$caret-size * 2, auto, auto);
            margin-top: -$caret-size;
        }
    }

    &-right {
        &::after {
            @include caret-left($color-tooltip, $caret-size);
            @include absolute(50%, auto, auto, -$caret-size * 2);
            margin-top: -$caret-size;
        }
    }

    &-top {
        &::after {
            @include caret-bottom($color-tooltip, $caret-size);
            @include absolute(auto, auto, -$caret-size * 2, 50%);
            margin-left: -$caret-size;
        }
    }

    &-bottom {
        &::after {
            @include caret-top($color-tooltip, $caret-size);
            @include absolute(-$caret-size * 2, auto, auto, 50%);
            margin-left: -$caret-size;
        }
    }
}